<template>
  <div class="tool-prices">
    <h2 class="bar-title mb-6"
      v-if="tool.prices && tool.prices.length>0">
      <span class="text-gray-1000 text-26 font-semibold break-words w-full">{{toolName}}&nbsp;{{$t('pricingTitle')}}</span>
    </h2>

    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4"
      :class="{'prices-flex': tool.prices && tool.prices.length < 3}"
      v-if="tool.prices && tool.prices.length>0">
      <div class="relative rounded-lg border border-gray-1600 bg-white px-4 py-5 text-center price-item"
        v-for="(item, key) in tool.prices"
        :key="key">
        <p class="text-lg font-semibold text-gray-1000 mb-4 break-words">{{item.title}}</p>
        <p class="flex items-center justify-center text-28 font-semibold text-gray-1000 break-words"
          v-if="hasRealVal(item.price)">
          <!-- <span class="text-lg mr-1">$</span> -->
          {{item.price}}
        </p>
        <p class="text-base text-gray-1500 mt-7 break-words"
          v-if="hasRealVal(item.cycle)">{{item.cycle}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'ToolDetailPrices',
  props: {
    tool: {
      type: Object,
      default: function () {
        return {}
      },
    },
    toolName: {
      type: String,
      default: '',
    },
  },
  computed: {
    ...mapState({
      locale: (state) => state.locale,
    }),
  },
}
</script>